<template>
  <!-- 属性组 -->
  <span class="caret-wrapper">
    <i
      :class="['sort-caret', 'ascending', isSort === 2 ? 'activeBottomSort' : '']"
      @click="changeSort(2)"
    />
    <i
      :class="['sort-caret', 'descending', isSort === 1 ? 'activeTopSort' : '']"
      @click="changeSort(1)"
    />
  </span>
</template>

<script setup>

const emit = defineEmits(['changeSort'])
const props = defineProps({
  index: {
    type: Number,
    default: 0
  },
  type: {
    type: Number,
    default: 0
  },
  isSort: {
    type: Number,
    default: 0
  }
})

const changeSort = (type) => {
  emit('changeSort', type, props.index, props.type)
}

</script>
<style scoped>
.activeBottomSort {
  border-bottom-color: #155BD4 !important;
}
.activeTopSort {
  border-top-color: #155BD4 !important;
}
</style>
